<template>
  <div class="l-main">
    <a-spin :spinning="loading" tip="登录中...">
      <a-row>
        <a-col :span="12">
          <div class="l-login-main">
            <div class="l-login-logo">
              <img :src="loginSettingInfo.login_logo">
            </div>
            <div class="l-login-content">
              <h4>{{loginSettingInfo.login_content1}}</h4>
              <h5 :style="{ marginBottom: '60px' }">{{loginSettingInfo.login_content2}}</h5>
              <a-tabs>
                <a-tab-pane key="1" tab="账号登陆">
                  <a-form-model ref="loginForm" layout="inline" :model="loginForm" @submit.native.prevent>
                    <a-row :gutter="[20,20]">
                      <a-col :span="24">
                        <a-alert v-if="loginError" type="error" :message="errorInfo" closable banner />
                      </a-col>
                      <a-col :span="12">
                        <a-input v-model="loginForm.username" placeholder="请输入用户名">
                          <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                        </a-input>
                      </a-col>
                      <a-col :span="12">
                        <a-input v-model="loginForm.password" type="password" placeholder="请输入用户密码">
                          <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                        </a-input>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="24" :style="{ marginTop: '30px', textAlign: 'right' }">
                        <a-button
                          type="primary"
                          html-type="submit"
                          @click="doLogin('loginForm')"
                          :disabled="loginForm.user === '' || loginForm.password === ''"
                        >
                          登录系统
                        </a-button>
                        <a-button
                          :style="{ marginLeft: '20px' }"
                          type="default"
                          @click="resetForm('loginForm')"
                        >
                          重置
                        </a-button>
                      </a-col>
                    </a-row>
                  </a-form-model>
                </a-tab-pane>
                <a-tab-pane key="2" tab="短信登陆">
                  <a-form-model ref="loginForm" layout="inline" :model="loginForm" @submit.native.prevent>
                    <a-row :gutter="[20,20]">
                      <a-col :span="24">
                        <a-alert v-if="loginError" type="error" :message="errorInfo" closable banner />
                      </a-col>
                      <a-col :span="9">
                        <a-input v-model="codeLoginForm.login_phone" placeholder="请输入系统绑定的手机号码">
                          <a-icon slot="prefix" type="phone" style="color:rgba(0,0,0,.25)" />
                        </a-input>
                      </a-col>
                      <a-col :span="5">
                        <a-input v-model="codeLoginForm.code" type="password" placeholder="输入验证码">
                          <a-icon slot="prefix" type="message" style="color:rgba(0,0,0,.25)" />
                        </a-input>
                      </a-col>
                      <a-col :span="5">
                        <a-button block :disabled="codeLoginForm.login_phone == ''" :loading="codeBtn" type="primary" @click="sendSms">{{codeText}}</a-button>
                      </a-col>
                      <a-col :span="5">
                        <a-button block :disabled="codeLoginForm.code == ''" type="primary" @click="smsLogin">登陆系统</a-button>
                      </a-col>
                    </a-row>
                  </a-form-model>
                </a-tab-pane>
              </a-tabs>
<!--              <a-form-model :style="{ marginTop: '80px' }" ref="loginForm" layout="inline" :model="loginForm" @submit.native.prevent>-->
<!--                <a-row :gutter="[20,20]">-->
<!--                  <a-col :span="24">-->
<!--                    <a-alert v-if="loginError" type="error" :message="errorInfo" closable banner />-->
<!--                  </a-col>-->
<!--                  <a-col :span="12">-->
<!--                    <a-input v-model="loginForm.username" placeholder="请输入用户名">-->
<!--                      <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />-->
<!--                    </a-input>-->
<!--                  </a-col>-->
<!--                  <a-col :span="12">-->
<!--                    <a-input v-model="loginForm.password" type="password" placeholder="请输入用户密码">-->
<!--                      <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />-->
<!--                    </a-input>-->
<!--                  </a-col>-->
<!--                </a-row>-->
<!--                <a-row>-->
<!--                  <a-col :span="24" :style="{ marginTop: '30px', textAlign: 'right' }">-->
<!--                    <a-button-->
<!--                      type="primary"-->
<!--                      html-type="submit"-->
<!--                      @click="doLogin('loginForm')"-->
<!--                      :disabled="loginForm.user === '' || loginForm.password === ''"-->
<!--                    >-->
<!--                      登录系统-->
<!--                    </a-button>-->
<!--                    <a-button-->
<!--                      :style="{ marginLeft: '20px' }"-->
<!--                      type="default"-->
<!--                      @click="resetForm('loginForm')"-->
<!--                    >-->
<!--                      重置-->
<!--                    </a-button>-->
<!--                  </a-col>-->
<!--                </a-row>-->
<!--              </a-form-model>-->
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <carousel>
            <div v-for="(item, index) in loginSettingInfo.login_images" :key="index">
              <img :style="{ width: '100%', height: 'auto' }" :src="item">
            </div>
          </carousel>
          <div class="message-wrapper">
            <h3><a-icon type="sound" :style="{ color: '#fd4602', margin: '0 6px 0 0' }" />系统公告</h3>
            <div class="message-list">
              <a-divider type="vertical" class="split-line"/>
              <a v-for="item in messageList" :key="item.id" @click="onAlert"><span>【{{msgTypeOpts[item.msg_type]}}】{{item.title}}</span></a>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
import { getLoginInfo, sendSms } from '@/api/login'
import { mapActions } from 'vuex'
import { Carousel } from 'ant-design-vue'
import { getMessage } from '@/api/message'
export default {
  name: 'UserLogin',
  components: {
    Carousel
  },
  data () {
    return {
      loginBtn: false,
      clientHeight: '',
      loading: false,
      loginError: false,
      errorInfo: '',
      loginForm: {
        username: '',
        password: ''
      },
      loginSettingInfo: {},
      codeLoginForm: {
        login_phone: '',
        code: ''
      },
      codeBtn: false,
      codeText: '发送验证码',
      second: 60,
      messageList: [],
      msgTypeOpts: {}
    }
  },
  created () {
    window.addEventListener('resize', this.getClientHeight)
    this.getClientHeight()
  },
  mounted () {
    this.getLoginInfo()
    this.getMessage()
  },
  methods: {
    ...mapActions(['Login', 'CodeLogin']),
    // 获取登陆页面信息
    getLoginInfo () {
      const app = this
      getLoginInfo()
        .then(res => {
          if (res.status === 0) {
            app.loginSettingInfo = res.result.login_settings
          } else {
            window.open('/404')
          }
        })
    },
    // handler
    getClientHeight () {
      this.clientHeight = `${document.documentElement.clientHeight}` + 'px'
    },
    // do login
    doLogin (formName) {
      const app = this
      const { Login } = this
      app.loading = true
      app.$refs[formName].validate(val => {
        if (val) {
          Login(app.loginForm)
            .then(res => {
              app.loading = false
              if (res.status === 0) {
                app.$router.push({ path: '/' })
              } else {
                app.loginError = true
                app.errorInfo = res.msg
              }
            })
            .catch(err => {
              app.$warning({
                title: '警告',
                content: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
                onOk: () => {
                  app.loading = false
                }
              })
            })
        } else {
          return false
        }
      })
    },
    getMessage () {
      const parameter = {}
      parameter['page_size'] = 14
      getMessage(parameter).then(res => {
        this.msgTypeOpts = res.result.msg_opts
        this.messageList = res.result.data
      })
    },
    sendSms () {
      const app = this
      sendSms(this.codeLoginForm.login_phone).then(res => {
        if (res.status === 0) {
          app.codeBtn = true
          setInterval(() => {
            app.second--
            app.codeText = app.second + '秒后操作'
            if (app.second === 0) {
              app.codeBtn = false
              app.codeText = '发送验证码'
            }
          }, 1000)
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    smsLogin () {
      const app = this
      app.loading = true
      const { CodeLogin } = this
      CodeLogin(this.codeLoginForm).then(res => {
        app.loading = false
        if (res.status === 0) {
          app.$router.push({ path: '/' })
        } else {
          app.loginError = true
          app.errorInfo = res.msg
        }
      })
    },
    // reset
    resetForm (formName) {
      this.$refs[formName].resetField()
    },
    onAlert () {
      this.$message.warning('请先登陆')
    }
  }
}
</script>

<style scoped>
  .l-main{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .l-login-main{
    padding: 100px;
  }

  .l-login-content {
    margin-top: 20%;
  }

  .l-login-content h4 {
    font-size: 30px;
    font-weight: 300;
    color: #4e5a64;
  }

  .l-login-content h5 {
    color: #a0a9b4;
    font-size: 16px;
    line-height: 22px;
  }
  .message-wrapper {
    position: fixed;
    width: 50%;
    height: 500px;
    right: 0;
    bottom: 0;
    background: #eeeeee;
    padding: 30px 60px;
  }
  .message-wrapper h3{font-weight: 700;font-size: 20px;color: rgba(0,0,0,0.65);}
  .message-list{position: relative;display: flex;align-items: flex-start;flex-flow: column wrap;height: 370px;}
  /deep/.message-list .split-line{position: absolute;left: 50%;top: 8%;height: 85%;background: #dcdcdc;}
  .message-list a{display: flex;align-items: center;justify-content: space-between;width: 45%;border-bottom: solid 1px #dbdbdb;height: 52px;color: rgba(0, 0, 0, 0.65);}
  .message-list a:nth-child(-n+7){margin-right: 10%;}
  .message-list a label{border: solid 1px #fd4600;background-color: #fed2b9;color: #fd4600;font-size: 12px;line-height: 18px;padding: 0 5px;border-radius: 3px;}
  .message-list span{width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
  .message-list i{font-style: normal;}
</style>
